<template>
    <div class="bcf pos-r">
        <div class="">
            <div style="width: 85vw;margin: 0 auto;" class="padt10">
                <mu-tabs inverse :value.sync="editTab">
                    <mu-tab value="main">基本信息</mu-tab>
                    <mu-tab value="owners" v-if="model.id > 0">业主绑定</mu-tab>
                    <mu-tab value="cars" v-if="model.id > 0">车辆绑定</mu-tab>
                </mu-tabs>
                <div class="bcf bdso pad10" v-show="editTab === 'main'" style="width: 85vw;min-height: 60vh" :key="editKey">

                  <title-a>基本信息</title-a>
                    <EzData ref="editForm" :config="configEdit.main()" v-model="model" ></EzData>
                </div>
                <div class="bcf bdso pad10" v-if="editTab === 'owners'" style="width: 85vw;min-height: 60vh">
                  <div class="mart10">
                    <title-a>选择业主</title-a>
                    <div class="flex-r flex-start">
                      <div class="mu-form-item" :key="ownerListUpdateKey"><EzSelect :config="ownersSelectConfig" v-model="ownerId"></EzSelect></div>
                      <div class="flex1 padl10">
                        <mu-button color="primary" @click="bind">绑定</mu-button>
                      </div>
                    </div>
                  </div>
                  <div>
                    <title-a>已绑定业主</title-a>
                    <div class="flex-r flex-start">
                      <LVPmOwner v-model="model.ownerIds" :key="ownerListUpdateKey" :show-del="true"></LVPmOwner>
                    </div>
                  </div>
                </div>
                <div class="bcf bdso pad10" v-if="editTab === 'cars'" style="width: 85vw;min-height: 60vh">
                  <div class="mart10">
                    <title-a>选择车辆</title-a>
                    <div class="flex-r flex-start">
                      <div class="mu-form-item" :key="carsListUpdateKey"><EzSelect :config="carsSelectConfig" v-model="carId"></EzSelect></div>
                      <div class="flex1 padl10">
                        <mu-button color="primary" @click="bindCar">绑定</mu-button>
                      </div>
                    </div>
                  </div>
                  <div>
                    <title-a>已绑定车辆</title-a>
                    <div class="flex-r flex-start">
                      <LVPmCar v-model="model.carIds" :key="carsListUpdateKey" :show-del="true"></LVPmCar>
                    </div>
                  </div>
                </div>
            </div>
        </div>
        <div class="w100 tac padt10">
            <mu-button v-auth="auth_edit" class="mar1" color="primary" @click="save">
                <mu-icon left value="save"></mu-icon>
                保存
            </mu-button>
            <mu-button class="mar1" color="warning" @click="cancelEdit">
                <mu-icon left value="close"></mu-icon>
                取消
            </mu-button>
        </div>
        <div class="pos-a t0 l0 pad10" v-if="!isComp">
            <mu-button color="primary" icon @click="goback(-1)">
                <mu-icon value="arrow_back"></mu-icon>
            </mu-button>
        </div>
<!--      <div>{{ownersSelectConfig}}</div>-->
<!--      <div>{{carsSelectConfig}}</div>-->
    </div>
</template>

<script>
    import mixin_auth from "./js/mixin_auth";
    import mixin_edit from "./js/mixin_edit";
    import EzData from "@/comps/EzData";
    import EzSelectConfig from "@/comps/form/EzSelectConfig";
    import apiOwner from "@/pages/v1/pm/Owner/js/apiOwner";
    import EzSelect from "@/comps/form/EzSelect.vue";
    import TitleA from "@/comps/comm/TitleA.vue";
    import LVPmOwner from "@/pages/v1/pm/Owner/js/LVPmOwner.vue";
    import apiCar from "@/pages/v1/pm/Car/js/apiCar";
    import LVPmCar from "@/pages/v1/pm/Car/js/LVPmCar.vue";
    export default {
        name: "v1-pm-House-edit",
        components: {LVPmCar, LVPmOwner, TitleA, EzSelect, EzData},
        mixins:[mixin_auth,mixin_edit],
        data() {
          let ownersSelectConfig = EzSelectConfig()
          ownersSelectConfig.setApi(apiOwner.urlChoice)
          let carsSelectConfig = EzSelectConfig()
          carsSelectConfig.setApi(apiCar.urlChoice)
          return {
            ownersSelectConfig,
            ownerId: undefined,
            ownerListUpdateKey:"",

            carsSelectConfig,
            carId: undefined,
            carsListUpdateKey:"",
          }
        },
      methods:{
        bind(){
          if (!this.model.ownerIds){
            this.model.ownerIds = []
          }
          if (this.ownerId > 0 && this.model.ownerIds.indexOf(this.ownerId) < 0) {
            this.model.ownerIds.push(this.ownerId)
            this.ownerListUpdateKey = Math.random()
          }
        },
        bindCar(){
          if (!this.model.carIds){
            this.model.carIds = []
          }
          if (this.carId > 0 && this.model.carIds.indexOf(this.carId) < 0) {
            this.model.carIds.push(this.carId)
            this.carsListUpdateKey = Math.random()
          }
        }
      }
    }
</script>

<style scoped>

</style>